import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect} from 'mirrorx';
import { Tabs, WhiteSpace, Badge } from 'antd-mobile';
import TabCont from '../../component/TabCont';
import { FormattedMessage} from 'react-intl';
const statusMap = ['POLICY_EFFECT', 'TERMINATION', 'EXPIRY']

class App extends React.Component { 
	constructor(props) {
        super(props);
        this.state ={
            dataList: []
        }
	}

	componentDidMount(){
        this.requestListData('POLICY_EFFECT');
    }
   
    requestListData = (status) => {
        T.fetch({
            url:`/msg/account/insurepolicyData.json?policyStatus=${status}`,
            method:"get",
            loading:true
        }).then((res)=>{
            if(res.success){              
                let list = res.value || [];
                this.setState({dataList: list})
            }
        })
    }

    onChange = (index) => {
        const policyStatus = statusMap[index]
        this.requestListData( policyStatus );
    }

    tranformDate = (dateStr) => {
        return dateStr.split(' ')[0].split('-').join('.');
    }

    goDetails = (id) => {
        actions.routing.push({
            pathname: "policy-detail",
            search: `?id=${id}`
        })
    }

	render() {
        let {dataList=[]} = this.state;
        const Lang = window.LangMessage ||{};

        const noContent =  <div className="tac success-page mb30">
                                <div className="success-wrap">
                                    <img src="/assets/images/nodata.png" />
                                </div>
                                <div className="f38 fc9" style={{lineHeight:'1rem'}}>
                                No Content.
                                </div>
                            </div>;
		return (
            <div className="mypolicy">
                <TabCont onChange={this.onChange}>
                    <div name={Lang.valid || "有效"}>
                        <ul className="list-ul">
                            {
                                dataList.map((item, index)=>{
                                    return (
                                        <li key={item.policyNo} className="list-li" onClick={()=>{this.goDetails(item.policyId)}}>
                                            <p className="bor-bottom-dashed pb20 f28 strong"><span className="ml15">{item.issuarePlanName}</span></p>
                                            <i className="icon-state-1"></i>
                                            <i className="icon-half-right"></i>
                                            <i className="icon-half-left"></i>
                                            <ul className="fc9 f26   pb20">
                                                <li className="mt30 ml15">{`${Lang.insurant || "被保险人"}:    ${item.insuredName}`}</li>
                                                <li className="mt10 ml15">{`${Lang.coverage_period || "保障期间"}:    ${this.tranformDate(item.effectiveDate)} - ${this.tranformDate(item.expiryDate)}`}</li>
                                            </ul>
                                        </li>
                                    )
                                })
                            }

                            {!dataList.length &&
                               noContent
                            }
                        </ul>
                    </div>
                    <div name={Lang.end || "终止"}>
                        <ul className="list-ul">
                            {
                                dataList.map((item, index)=>{
                                    return (
                                        <li key={item.policyNo} className="list-li" onClick={()=>{this.goDetails(item.policyId)}}>
                                            <p className="bor-bottom-dashed pb20 f28 strong"><span className="ml15">{item.issuarePlanName}</span></p>
                                            <i className="icon-state-3"></i>
                                            <i className="icon-half-right"></i>
                                            <i className="icon-half-left"></i>
                                            <ul className="fc9 f26   pb20">
                                                <li className="mt30 ml15">{`${Lang.insurant || "被保险人"}:    ${item.insuredName}`}</li>
                                                <li className="mt10 ml15">{`${Lang.coverage_period || "保障期间"}:    ${this.tranformDate(item.effectiveDate)} - ${this.tranformDate(item.expiryDate)}`}</li>
                                            </ul>
                                        </li>
                                    )
                                })
                            }

                            {!dataList.length &&
                               noContent
                            }
                        </ul>
                    </div>
                    <div name={Lang.not_valid || "失效"}>
                        <ul className="list-ul">
                            {
                                dataList.map((item, index)=>{
                                    return (
                                        <li key={item.policyNo} className="list-li" onClick={()=>{this.goDetails(item.policyId)}}>
                                            <p className="bor-bottom-dashed pb20 f28 strong"><span className="ml15">{item.issuarePlanName}</span></p>
                                            <i className="icon-state-2"></i>
                                            <i className="icon-half-right"></i>
                                            <i className="icon-half-left"></i>
                                            <ul className="fc9 f26   pb20">
                                                <li className="mt30 ml15">{`${Lang.insurant || "被保险人"}:    ${item.insuredName}`}</li>
                                                <li className="mt10 ml15">{`${Lang.coverage_period || "保障期间"}:    ${this.tranformDate(item.effectiveDate)} - ${this.tranformDate(item.expiryDate)}`}</li>
                                            </ul>
                                        </li>
                                    )
                                })
                            }

                            {!dataList.length &&
                               noContent
                            }
                        </ul>
                    </div>
                </TabCont>
            </div>
        )
	}
}

export default App;   